<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                                <style>
    *{margin:0;padding:0;box-sizing: border-box;}
    #calendar {
        padding-top: 10px;
        font-size: 14px;
    }

    table {
        display: table;
        width: 100%;
        text-align: center;
    }

    td {
        padding-top: 8px;
        padding-bottom: 8px;
        position: relative;
    }

    .sign {
        background-image: url('http://ww1.sinaimg.cn/large/967ac3fdgw1exgya6mmpxj205p05p74c.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 20px 20px;
    }

    .sign:after {
        content: '已签到';
        position: absolute;
        display: inline-block;
        width: 100%;
        top: 24px;
        left: 0;
        text-align: center;
        color: #ff4b07;
    }

    span {
        display: inline-block;
        width: 100%;
        text-align: center;
    }

    header {
        background-color: #ff4b07;
        color: #fff
    }
</style>
        </head>
        <body>
    <div id="calendar">
        <span></span>
        <table>
            <thead>
            <tr>
                <td>一</td>
                <td>二</td>
                <td>三</td>
                <td>四</td>
                <td>五</td>
                <td>六</td>
                <td>日</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
<script>
        var year = new Date().getFullYear();
        var month = new Date().getMonth() + 1;
        var first_day = new Date(year, month - 1, 1).getDay();
        var final_date = new Date(year, month, 0).getDate();
        var StartPoint = first_day - 1 > -1 ? first_day - 1 : 6;
        var ttd = document.getElementsByTagName("tbody")[0].getElementsByTagName("td");
        document.getElementById('calendar').getElementsByTagName("span")[0].innerText = year + '年' + month + '月';
        for (var i = StartPoint; i < final_date + StartPoint; i++) {
            ttd[i].innerText = i - StartPoint + 1;
        }
        var signDate = [1, 8, 9, 13, 16, 26];
        for (var j = 0; j < signDate.length; j++) {
            ttd[signDate[j] + StartPoint - 1].className = 'sign';
        }
</script>

        </body>
</html> 